<template>
    <div v-if="isReload">
        <a-row>
            <a-col v-for="item in renderData" :key="item.deviceId">
                <div class="list-wrap">
                    <a-row>
                        <a-col :span="22">
                            <a-typography-title
                                class="block-title"
                                :heading="6"
                            >
                                {{ item.deviceName }}
                                <a-tag
                                    v-if="item.status == 1"
                                    size="small"
                                    color="green"
                                >
                                    <template #icon>
                                        <icon-check-circle-fill />
                                    </template>
                                    <span>{{ '在线' }}</span>
                                </a-tag>
                                <a-tag
                                    v-else-if="item.status == 0"
                                    size="small"
                                    color="red"
                                >
                                    <template #icon>
                                        <icon-check-circle-fill />
                                    </template>
                                    <span>{{ '离线' }}</span>
                                </a-tag>
                            </a-typography-title>
                            <a-typography-text>
                                更新时间：{{
                                    dayjs(item.lastUpdateTime).format(
                                        'YYYY-MM-DD HH:mm:ss'
                                    )
                                }}
                            </a-typography-text>
                        </a-col>
                        <a-divider
                            role="separator"
                            direction="vertical"
                            :style="{
                                height: '60px',
                            }"
                        />
                        <a-space
                            :size="6"
                            direction="vertical"
                            style="padding-top: 15px"
                        >
                            <a-button
                                type="primary"
                                size="mini"
                                @click="gotoDetail(item.deviceId)"
                            >
                                <template #icon>
                                    <icon-eye />
                                </template>
                                {{ $t('detail') }}
                            </a-button>
                        </a-space>
                    </a-row>
                    <a-row class="list-row" :gutter="24">
                        <a-col
                            v-for="prop in item.properties"
                            :key="prop.identifier"
                            :xs="12"
                            :sm="12"
                            :md="12"
                            :lg="8"
                            :xl="6"
                            :xxl="4"
                            class="list-col"
                            style="min-height: 162px"
                        >
                            <CardWrap
                                :loading="loading"
                                :title="prop.name"
                                :device-id="item.deviceId"
                                :identifier="prop.identifier"
                                :spce-value="prop.value"
                                :spce-name="prop.name"
                                :spce-unit="prop.specs.unit"
                                :occurred-time="
                                    prop.occurredTime
                                        ? dayjs(prop.occurredTime).format(
                                              'YYYY-MM-DD HH:mm:ss'
                                          )
                                        : ''
                                "
                            >
                                <!-- <template #skeleton>
                                    <a-skeleton :animation="true">
                                        <a-skeleton-line
                                            :widths="['20%', '80%']"
                                            :rows="2"
                                        />
                                        <a-skeleton-line
                                            :widths="['100%']"
                                            :rows="1"
                                        />
                                    </a-skeleton>
                                </template> -->
                            </CardWrap>
                        </a-col>
                    </a-row>
                </div>
                <a-divider />
            </a-col>
        </a-row>
    </div>
</template>

<script lang="ts" setup>
    import dayjs from 'dayjs';
    import { ref, nextTick } from 'vue';
    import { useRouter } from 'vue-router';
    import { queryDeviceList, Device } from '../service';
    import CardWrap from './card-wrap.vue';

    const router = useRouter();
    const loading = ref(false);
    const isReload = ref(true);
    const renderData = ref<Device[]>([]);

    const loadData = async () => {
        loading.value = true;
        const dd: any = await queryDeviceList();
        isReload.value = false;
        loading.value = false;
        renderData.value = dd.result;
        nextTick(() => {
            isReload.value = true;
        });
    };
    const gotoDetail = (deviceId: number) => {
        router.push({ name: 'device-detail', query: { id: deviceId } });
    };
    const fnRefreshPage = () => {
        loadData();
    };
    defineExpose({
        fnRefreshPage,
    });
    loadData();
</script>

<style scoped lang="less"></style>
